<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>跟进历史</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js"></script>
    <!-- <link rel="stylesheet" href="../css/public.css" media="all"> -->
    <link id="layuicss-layer" rel="stylesheet" href="../../layui_files/layer.css" media="all">
       <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>

    <div style="display: none;" id="UpdateDiv">
        <form class="layui-form" action="" lay-filter="dataFrm01" id="dataFrm01"  >
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
        
            <div class="layui-form-item">
                <label class="layui-form-label">跟进日期：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="password" name="data" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">跟进内容：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="password" name="data" required  lay-verify="required" placeholder="再输入一遍密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">跟进方式：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">跟进结果：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">录入人：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">跟进类型：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>

    
           
        
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="doSubmit01">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        </div>
    
    <div class="box">
        <div class="layui-card">
            <div class="layui-card-header" ><h1 style="color: #1E9FFF;"><strong>跟进历史管理</strong></h1></div>
            <div class="" style="margin: 10px 10px 10px 10px;">
    
                <fieldset class="fieldset" style="border: 1px solid darkgray;">
                    <legend style="font-size: large;">搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="" id="qoFrm" lay-filter="qoFrm">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">关键字</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="keyword" autocomplete="off" class="layui-input" placeholder="">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input" placeholder="">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">结束时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input" placeholder="">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                        <label class="layui-form-label">跟进类型</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required">
                                                <option value="1" selected>潜在客户开发</option>
                                                <option value="2">正式客户跟进</option>
                                            </select>
                                        </div>
                                </div>
    
                                <div class="layui-inline">
                                    <button  class="layui-btn layui-btn-primary" lay-submit="" id="doSearch" lay-filter="data-search-btn"><i class="layui-icon"></i> 查 询</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
            </div>
    
            <div class="layui-card-body">
                <table class="layui-table" id="table" lay-filter="test"></table>
            </div>
            <div id="pageDemo" style="text-align: center"></div>
        </div>
    </div>
    
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </script>
    
    
    <script>
        layui.use(["table","form","laypage","laydate"],function(){
            var table = layui.table;
            var form = layui.form;
            var $=layui.jquery;
            var laypage = layui.laypage;
            var transfer = layui.transfer;
            var laydate = layui.laydate;


            //绑定时间选择器
            laydate.render({
                elem:"#startTime"
            });

            laydate.render({
                elem:"#endTime"
            });
    
    

            //前端接口（URL）接受后端数据进行数据表格的渲染
            var tableIns = table.render({
                elem:'#table',
                toolbar: '#toolbarDemo',
                url:'http://127.0.0.1:5500/html/myJson.json',
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.items //解析数据列表
                    };
                },
                cols:[[
                    {field:'select',type:"checkbox"},
                    {field:'id',title:'编号',sort:true},
                    {field:'name',title:'姓名'},
                    {field:'email',title:'跟进日期',sort:true},
                    {field:'age',title:'跟进内容'},
                    {field:'dept',title:'跟进方式'},
                    {field:'role',title:'跟进结果'},    
                    {field:'role',title:'录入人'},
                    {field:'role',title:'跟进类型'},
                    {field:'操作',title:'操作',toolbar:'#barDemo',fixed:'right'}
                ]],
                page:{
                    layout:['prev','page','next','count','limit','skip']//,'limit','skip'
                    ,page:function(res){
                        return res.page
                    } //获取currentPage
    
                    // ,limit:function(res){
                    //     return res.limit
                    // }//获取pageSize
                    ,groups:10 //最多显示几个跳页按钮
                    ,first:true //显示首页
                    ,last:true  //显示尾页
                }
    
            });
            

    
            //头部工具栏
            table.on('toolbar(test)',function (obj){
                //打印事件名
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
    
                // 获取事件名
                var eventName = obj.event;
                switch (eventName){
                    case "getCheckData":
                        var arr = checkStatus.data;
                        layer.alert(JSON.stringify(arr));
                        break;
    
                    case "getCheckLength":
                        var arr = checkStatus.data;
                        layer.msg("选中了"+arr.length+"条数据！");
                        break;
    
                    case "isAll":
                        var flag = checkStatus.isAll;
                        var str = flag ? '全选' : '未全选' ;
                        layer.msg(str);
                        break;
                    
    
                    default:
                        break;
    
                };
            });
    
    
            //行工具栏事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                 if(layEvent === 'edit'){ //点击修改进入该事件，调用修改方法
                    openUpdate(data);
                }
            });
    
            var url;
            var mainIndex;
    
        
            //修改方法（函数）
            function openUpdate(data){
                mainIndex=layer.open({
                    type:1,
                    title:'编辑',
                    content:$("#UpdateDiv"),
                    area:['800px','600px'],
                    success:function (index){
                        form.val("dataFrm",data);
                        // url="http://127.0.0.1:5500/sys/update";
                    }
                })
            }


            
  

            //模糊查询表单监听提交
            form.on('submit(data-search-btn)', function (data) {
                // var result = JSON.stringify(data.field);
                // layer.alert(result, {
                //     title: '最终的搜索信息'
                // });

                //执行搜索重载
                // table.reload('table', {
                //     page: {
                //         curr: 1
                //     }
                //     , where: {
                //         searchParams: result
                //     }
                // }, 'data');
    
                // return false;
                

                var params = $("#qoFrm").serialize();
                alert(params);

                $.ajax({
                    url:'http://127.0.0.1:5500/sys/dataSearch', //新增数据接口
                    type: 'POST',
                    data:params,
                    success:function(res){
                    alert("模糊查询成功");
                    //重新加载数据表格
                    // tableIns.reload();

                    //渲染返回的模糊查询数据（待开发......................）
                },
                    error:function(){
                        alert("模糊查询失败");
                    },

                    
            })


                
            });
    
            // 新增表单监听提交
            form.on('submit(doSubmit)', function(data){
                //序列化/提交表单
                var params = $("#dataFrm").serialize();
                alert(params);


                $.ajax({
                    url:'http://127.0.0.1:5500/sys/insert', //新增数据接口
                    type: 'POST',
                    data:params,
                    success:function(res){
                    alert("添加成功");
                    //关闭弹出层
                    layer.close(mainIndex);
                    //重新加载数据表格
                    tableIns.reload();
                },
                    error:function(){
                        alert("添加失败");
                        layer.close(mainIndex);

                    },

                    
            })
                
            
            });

            // 修改表单监听提交
            form.on('submit(doSubmit01)', function(data){
                //序列化/提交表单
                var params = $("#dataFrm01").serialize();
                alert(params);


                $.ajax({
                    url:'http://127.0.0.1:5500/sys/update', //修改数据接口
                    type: 'POST',
                    data:params,
                    success:function(res){
                    alert("修改成功");
                    //关闭弹出层
                    layer.close(mainIndex);
                    //重新加载数据表格
                    tableIns.reload();
                },
                    error:function(){
                        alert("修改失败");
                        layer.close(mainIndex);

                    },

                    
            })

                

            });



    
        });
    
    </script>
    
    
    
    
    
    </body>
</html>